{extend name="layout/base" /} {block name="main"}
<style>
    .cropit-preview {
        background-color: #f8f8f8;
        background-size: cover;
        border: 1px solid #ccc;
        border-radius: 3px;
        margin-top: 7px;
        width: 960px;
        height: 350px;
    }
</style>

<article class="main__content content">
    <form action="save" method="post">
        <div class="content__wrapper form">
            <div class="form__group">
                <div class="form__label">
                    轮播标题 :
                </div>
                <input name="title" value="{$swiper.title ?? ''}" type="text" placeholder="请输入轮播标题" class="textfield" />
            </div>
            <div class="form__group">
                <div class="form__label">
                    封面图 :
                </div>
                <div class="image-editor" style="margin-left: -30px">
                    <input type="file" class="cropit-image-input">
                    <div class="cropit-preview"></div>
                    <input type="range" class="cropit-image-zoom-input">
                    <input type="hidden" name="image-data" class="hidden-image-data" />
                </div>
            </div>
            <div class="form__group">
                <div class="form__label">
                    权重 :
                </div>
                <input name="sequence" value="{$swiper.sequence ?? ''}" type="text" placeholder="请输入权重" class="textfield" />
            </div>
            <div class="form__group">
                <input name="id" value="{$swiper.id ?? ''}" type="hidden">
                <button type="submit" style="margin: 4% 40%" class="button button--radius button--blue am-margin-0">
                    <i class="fa fa-send"></i> &nbsp; 提交
                </button>
            </div>
        </div>
    </form>
</article>

<script>
    $(function() {
        $('.image-editor').cropit({
            imageState: {
                src: '{$swiper.image ?: ""}',
            },
        });

        $('form').submit(function() {
            // Move cropped image data to hidden input
            var imageData = $('.image-editor').cropit('export');
            $('.hidden-image-data').val(imageData);
            return true;
        });
    });
</script>
{/block}
